<template>
  <div class="activity">
    <el-card>
      <span class="head" style="cursor: pointer">
        {{ activity.activityName }}
      </span>
      <el-button style="margin-left: 10px" type="success" size="medium"
        >进行中</el-button
      >
      <el-button style="float: right" size="medium" @click="goBackActivityList"
        >返回活动列表</el-button
      >
      <br />
      <br />
      <span style="color: rgb(105, 105, 105)">
        <span>参与人数:&nbsp;</span>
        <span style="margin-left: 5px">{{ activity.joinNumber }}</span>
        <span style="margin-left: 20px">起止时间：长期</span>
      </span>
      <el-button
        v-if="isJoin"
        style="float: right"
        size="medium"
        @click="isIntroduce = false"
        >参与用户</el-button
      >
      <el-button
        v-if="isJoin"
        style="float: right"
        size="medium"
        @click="isIntroduce = true"
        >活动简介</el-button
      >
      <el-button
        v-if="!isJoin"
        style="float: right"
        size="medium"
        @click="joinActivity"
        >参与活动</el-button
      >
      <el-divider></el-divider>
      <div v-if="isIntroduce">
        <p v-html="activity.content"></p>
      </div>
      <div v-else>
        <div v-for="(item, index) in userList" :key="index">
          <el-row :gutter="24">
            <el-col :span="2">
              <el-avatar
                style="cursor: pointer"
                @click.native="showInfo(item.user.userId)"
                :src="item.user.avatar"
              ></el-avatar>
            </el-col>
            <el-col
              style="font-size: 20px; float: left; margin-top: 5px"
              :span="20"
            >
              <el-link
                @click.native="showInfo(item.user.userId)"
                type="primary"
                style=""
                >{{ item.user.nickname }}</el-link
              >
              <span style="margin-left: 20px">个性签名:&nbsp;&nbsp;</span>
              <span>{{ item.user.signature }}</span>
            </el-col>
            <el-col :span="2">
              <el-button
                style="margin-top: 5px; float: right"
                size="medium;"
                @click="showInfo(item.user.userId)"
                >去看看</el-button
              >
            </el-col>
          </el-row>
          <el-divider></el-divider>
        </div>
        <div style="float: right; margin-bottom: 5px">
          <el-button :disabled="current == 1 ? true : false" @click="back"
            >上一页</el-button
          >
          <el-button
            :disabled="
              current == Math.ceil(this.total / this.limit)
                ? true
                : false || total == 0
            "
            type=""
            @click="next"
            >下一页</el-button
          >
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import activity from "@/api/activity";
import join from "@/api/join";
import order from "@/api/order";
import user from "@/api/user";
import store from "@/store";

export default {
  data() {
    return {
      activity: {},
      isJoin: false,
      activityId: 0,
      userList: [],
      userListPage: [],
      isIntroduce: true,
      current: 1,
      limit: 4,
      total: 0,
    };
  },
  created() {
    this.activityId = this.$route.query.id;
    this.init();
  },
  methods: {
    init() {
      this.getActivity();
      this.getIsJoin();
      this.getAllUserList();
    },
    getActivity() {
      activity.getOneActivity(this.activityId).then((res) => {
        if (res.success) {
          this.activity = res.data.activity;
        }
      });
    },
    getIsJoin() {
      join
        .isJoin(this.$store.state.user.userId, this.activityId)
        .then((res) => {
          if (res.success) {
            this.isJoin = res.data.isJoin;
          }
        });
    },
    getAllUserList() {
      join.getAllUser(this.activityId).then((res) => {
        if (res.success) {
          this.userList = res.data.joinList;
          this.userListPage = res.data.joinList;
          this.total = res.data.total;
          this.pageSlice();
        }
      });
    },
    showInfo(id) {
      this.$router.push({ path: "/space", query: { id: id } });
    },
    goBackActivityList() {
      this.$router.push({ path: "/activity" });
    },
    back() {
      this.current -= 1;
      this.pageSlice();
    },
    next() {
      this.current += 1;
      this.pageSlice();
    },
    sliceArr(arr) {
      let newObj = [];
      for (let i in arr) {
        newObj[i] = arr[i];
      }
      return newObj.slice(
        (this.current - 1) * this.limit,
        this.current * this.limit
      );
    },
    pageSlice() {
      let copyUserList = this.userListPage;
      this.userList = this.sliceArr(copyUserList);
    },
    joinActivity() {
      this.$confirm("是否参加该活动, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
          join.joinActivity(this.$store.state.user.userId, this.activityId).then((res) => {
              if (res.success) {
                this.getOrderAdd()
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消参加",
          });
        });
    },
    getOrderAdd() {
      order.addOrder(this.$store.state.user.userId, this.activityId).then((res) => {
          if (res.success) {
            this.getActivityAdd()
          }
        });
    },
    getActivityAdd() {
      activity.activityAdd(this.activityId).then((res) => {
        if (res.success) {
          this.getJoinNumAdd()
        }
      });
    },
    getJoinNumAdd() {
      user.joinNumAdd(this.$store.state.user.userId).then((res) => {
        if (res.success) {
          this.$message({
            type: "success",
            message: "参加成功!",
          });
          this.isJoin = true;
          store.commit("setOrderAdd");
          store.commit("setJoinAdd")
          this.getAllUserList();
        }
      });
    },
  },
};
</script>

<style scoped>
.activity {
  width: 80%;
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 5%;
}
.head {
  font-size: 20px;
  color: rgb(13, 113, 187);
}
.head:hover {
  font-size: 20px;
  color: rgb(0, 191, 255);
}
</style>